<template>
  <div class="market-email">
    <!--总览-->
    <ul class="preview" style="justify-content: flex-start">
      <li style="margin-right: 40px">
        <h1>{{info.feedCount}}</h1>
        <p>总动态数</p>
      </li>
      <li>
        <h1>{{info.likesCount}}</h1>
        <p>点赞数</p>
      </li>
<!--      <li>-->
<!--        <h1>{{info.commentsCount}}</h1>-->
<!--        <p>评论数</p>-->
<!--      </li>-->
    </ul>
    <!--图表展示-->
    <el-select  size="small" style="float: right;z-index: 999;width: 110px;"
                v-model="year"  @change="getEchart">
      <el-option
        v-for="item in options"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>
    <div class="echart" id="myEchartSocial"></div>
    <!-- 列表展示-->
    <el-table :data="tableData">
      <el-table-column  label="规则名称">
        <template slot-scope="scope">
          <router-link  style="color: #2A97F9;cursor: pointer" :to="{path:`/automation/marketStatic/socialDetail/${scope.row.id}`}" class="more" :title="scope.row.name">
            [{{scope.row.name}}]
          </router-link>
        </template>
      </el-table-column>
      <el-table-column  label="状态">
        <template slot-scope="scope">
          {{scope.row.ruleEnable?'已启用':'未启用'}}
        </template>
      </el-table-column>
      <el-table-column  label="点赞数">
        <template slot-scope="scope">
          {{scope.row.countVo.likesCount}}
        </template>
      </el-table-column>
<!--      <el-table-column  label="评论数">-->
<!--        <template slot-scope="scope">-->
<!--          {{scope.row.countVo.commentsCount}}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
<!--      <el-table-column prop="state" label="发送时间">-->
<!--        <template slot-scope="scope">-->
<!--         <span v-show="scope.row.facebookPublishTime"> facebook:{{scope.row.facebookPublishTime}} <br></span>-->
<!--         <span v-show="scope.row.linkedinPublishTime"> linkedin:{{scope.row.linkedinPublishTime}}<br></span>-->
<!--          <span v-show="scope.row.twitterPublishTime"> twitter:{{scope.row.twitterPublishTime}}<br></span>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <el-pagination align="right" style="margin-top: 15px" v-show="total>0"
                   @size-change="handleSizeChange" background
                   @current-change="handleCurrentChange"
                   :current-page.sync="nowPage"
                   :page-size="nowSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
    import {getSocialStatic,getSocialEchart,getSocialList} from '@/api/marketStatic/social'
    export default {
        name: "SocialComponent",
        data() {
            return {
                tableData: [],
                nowPage: 1,
                nowSize: 10,
                total: 0,
                query:'',
                year:new Date().getFullYear(),
                options:[new Date().getFullYear(),2019,2018,2017,2016,2015],
                info:{
                    feedCount:0,likesCount:0,commentsCount:0
                }
            }
        },
        created() {
            this.getData();//获取统计数据
            this.getEchart();//获取图表数据
            this.getList();//获取表格数据
        },
        methods: {
            search(query){
                this.nowPage=1;
                this.query=query;
                this.getData();//获取统计数据
                this.getEchart();//获取图表数据
                this.getList();//获取表格数据
            },
            //获取列表数据
            getList() {
                let params = {pageSize:this.nowSize,pageNo:this.nowPage,ruleName:this.query};
                getSocialList(params).then(res => {
                    if(res.data.success){
                        this.tableData = res.data.data.records;
                        this.total = res.data.data.total
                    }
                })
            },
            //获取echart数据
            getEchart() {
                getSocialEchart(this.year,this.query).then(res => {
                    if(res.data.success){
                        let result =res.data.data;
                        let commentsCount=[],likesCount=[],month=[];
                        result.map(item=>{
                            commentsCount.push(item.commentsCount)
                            likesCount.push(item.likesCount)
                            month.push(item.month)
                        })
                        let count = Math.max.apply(null, commentsCount)>Math.max.apply(null, likesCount)?Math.max.apply(null, commentsCount):Math.max.apply(null, likesCount);
                        let option = {
                            title: {
                                text: '统计图表',
                                textStyle: {
                                    fontsize: '13px',
                                    fontWeight: 'normal'
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                left:'7%',
                                data: ['点赞数']
                            },
                            calculable: true,
                            xAxis: [
                                {
                                    type: 'category',
                                    data: month
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    max: count<5?5:count,//最大值处理
                                    axisLabel: {
                                        formatter: (value,index)=>{
                                            return parseInt(value)
                                        }
                                    }
                                }
                            ],
                            series: [
                                {
                                    name: '点赞数',
                                    type: 'bar',
                                    data: likesCount,
                                    itemStyle: {color: '#CCE1F4'}
                                },
                                // {
                                //     name: '评论数',
                                //     type: 'bar',
                                //     data: commentsCount,
                                //     itemStyle: {color: '#ABBCDA'}
                                // },
                            ]
                        };
                        this.myChart = this.$echarts.init(document.getElementById('myEchartSocial'));
                        this.myChart.setOption(option)
                    }
                })
            },
            //获取统计数据
            getData() {
                getSocialStatic(this.query).then(res => {
                    if(res.data.success){
                        this.info = res.data.data;
                    }
                })
            },
            handleSizeChange(size) { //  条数发生改变
                this.nowSize = size
                this.getList()
            },
            handleCurrentChange(page) { //页数发生变化
                this.nowPage = page
                this.getList()
            }
        }

    }
</script>

<style scoped lang="scss">
  .market-email {
    .preview {
      display: flex;
      justify-content: space-around;
      margin-bottom: 30px !important;

      li {
        width:280px;
        background: url('../../../../public/img/bg11.png') no-repeat;
        background-size: 100% 100%;
        padding: 25px 3%;
        color: #325893;
        h1 {
          font-size: 28px;
          margin-bottom: 30px;
        }

        p {
          font-size: 16px;
        }
      }
    }
    li:nth-child(2){
      background: url('../../../../public/img/bg22.png') no-repeat;
      background-size: 100% 100%;
    }
    li:nth-child(3){
      background: url('../../../../public/img/bg33.png') no-repeat;
      background-size: 100% 100%;
    }
    .echart {
      width: 100%;
      height: 500px;
    }
    .el-table{
      font-size: 13px;
    }
  }
  @media screen and (min-width: 1800px) {
    .market-email .preview li{
      width: 300px;
    }
  }
</style>
